<template>
    <div class=" mt-10 text-gray-500">热门歌手</div>
    <el-row class="mt-2 text-gray-500">            
        <el-col :span="6" class="p-3" v-for="(item, index) in hotSingerList" :key="index">
            <div style="position:relative;height:220px;">
                <el-image :src="baseUrl + item.avatar" class=" rounded-xl" style="width:100%;height:220px;" />
                <el-image :src="baseUrl + item.avatar" class=" rounded-full border-white border-2" style="position:absolute;bottom:-35px;left:calc(50% - 35px);width:70px;height:70px;" />
            </div>
            <div class=" mt-10 font-bold text-center text-gray-800">{{ item.name }}</div>
            <div class=" mt-1 text-sm text-center">{{ item.introduce }}</div>
        </el-col>        
    </el-row>
</template>
<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { indexHotUser } from "@/http/api";
const hotSingerList = ref([]);
const baseUrl = import.meta.env.VITE_API_URL;
onMounted(() => {
  getHotSinger();
});

// 热门歌手
const getHotSinger = async () => {
  const { data } = await indexHotUser();
  hotSingerList.value = data.data;
  console.log(data);
};
</script>